<template>
  <div id="l_addStudent">
      <h2>新增学生</h2>
      <table>
          <tr>
              <td>学生姓名111111:</td>
               <td><input type="text" v-model="name"></td>
          </tr>
           <tr>
              <td>学生年龄111111:</td>
               <td><input type="text" v-model="age"></td>
          </tr>
          <tr>
               <td>学生性别:</td>
               <td><input type="radio" name="sex1" v-model="gender" value="男"> 男<input type="radio" name="sex1" v-model="gender" value="女">女</td>
          </tr>
          <tr>
              <td colspan="2"> <button id="add_student" @click="addStudent">确认新增</button></td>
          </tr>
      </table>
  </div>
</template>

<script>
export default {
    props: ['student'],
    data(){
        return{
            index:3,
            name:"",
            age:"",
            gender:"男"

        }
    },
    methods:{
        addStudent(){
            this.index++;
            let newStudent={
                id:this.index,
                name:this.name,
                age:this.age,
                gender:this.gender

            }
            this.student.push(newStudent);
            this.name="";
            this.age="";
            this.gender="男"
        }  
    }
}
</script>

<style scoped>
    #l_addStudent{
        margin: 0;
        box-sizing: border-box;
        width:310px;
        height: 210px;
        background-color: white;
        border-radius: 5px;
        padding: 15px;
    }
    tr{
        height: 35px;
      
    }
    td{
        font: 16px;
        font-weight: 500;
         height: 35px;
         line-height: 35px;
    }
    tr td:nth-child(2){
        padding-left: 10px;
       
    }
    [type="radio"]{
        margin: 0 5px;

         vertical-align: middle;
    }
    #add_student{
        width: 100%;
        border: 1px solid #ddd;
        height: 30px;
        border-radius: 5px;
        outline: none;
        cursor: pointer;
    }
    input{
        outline: none;
        border: 1px solid #ddd;
        height: 25px;
        border-radius: 5px;
    }
</style>